<template>
  <div class="horizontal-box">
    <horizontal :data-list="list" :color-list="colors" />
  </div>
</template>
<script setup>
import horizontal from "../components/g-horizontal-bar.vue";
import { ref } from "vue";
const list = ref([
  { name: "研发", count: 12 },
  { name: "测试", count: 2 },
  { name: "运营", count: 5 },
  { name: "产品", count: 1 },
  { name: "运维", count: 6 },
  { name: "数据", count: 3 },
]);
const colors = ref(["#ffa4a4", "#ffffa4", "#a4ffa4", "#a4ffff", "#a8a4ff", "#ffa4e8"]);
</script>
<style lang="scss" scoped>
.horizontal-box {
  width: 500px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #0a2750;
  border-radius: 5px;
}
</style>
